<template>
  <div>
    <div v-if="chaterInfoList.length > 0">

      <div v-for="item in chaterInfoList" class="list">
        <van-swipe-cell>
          <div class="badge">
            <van-badge :content="user.getNum(item.user_id) > 0 ? user.getNum(item.user_id) : ''" :max="99" />
          </div>
          <message :user="item" @click="toChat(item.user_id)" />
          <template #right>
            <van-button square type="danger" class="delete-button" text="删除" />
          </template>
        </van-swipe-cell>
      </div>


    </div>
    <div v-else>
      <van-empty description="暂无消息" />
    </div>
  </div>
</template>
<script setup lang='ts'>
import message from '@/components/message.vue';
import { userStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
const user = userStore()
let { chaterInfoList } = storeToRefs(user);

onMounted(() => {
  let map = new Map()
  chaterInfoList.value.forEach(element => {
    if (!map.has(element.user_id)) {
      map.set(element.user_id, element)
    }
  });
  user.setChaterInfoList(Array.from(map.values()))
})
const router = useRouter()
const toChat = (id: string) => {
  user.resetNum(id)
  router.push({
    path: '/ChatInterface',
    query: {
      id: id
    }
  })
}
</script>

<style lang='less' scoped>
.list {
  position: relative;
}

.badge {
  position: absolute;
  top: 2.5rem;
  right: 1.5rem;
}

.delete-button {
  height: 100%;
}
</style>
